<template>
  <div class="box">
    <header>
      <div class="yuedu">
        <div class="tubiao">
          <i class="iconfont icon-shenglvehao"></i>
          <!-- <i class="iconfont icon-cross"></i> -->
        </div>
        <router-link to="/Shouye"
          ><span class="iconfont icon-fanhui"></span
        ></router-link>
        <div class="shezhi">设置</div>
      </div>

      <div class="daka">
        <div class="dakaleft">今日未打卡</div>
        <div class="dakaright">
          26&nbsp;&nbsp;&nbsp;27&nbsp;&nbsp;&nbsp;
          28&nbsp;&nbsp;&nbsp;29&nbsp;&nbsp;&nbsp;
          30&nbsp;&nbsp;&nbsp;31&nbsp;&nbsp;&nbsp;1
        </div>
      </div>
      <div class="cihui">
        <div class="shang">
          <span> 四级英语词汇</span>
          <p>更换背词计划</p>
        </div>
        <div class="zhong">
          <span>0/2607</span>
        </div>
        <div class="xia">
          <p class="xialeft">
            <span> 学习</span>
            <span>待学习20</span>
          </p>
          <p class="xiaright">
            <span> 复习</span>
            <span>待复习0</span>
          </p>
        </div>
      </div>
      <!-- --------------单词本----------- -->
      <div class="mulu">
        <ul>
          <li>单词本</li>
          <li>句子</li>
          <li>笔记</li>
        </ul>
        <span>
          <span>排序</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <span>编辑</span>
        </span>
      </div>
    </header>
    <main>
      <!-- 形成滚动区域 -->
      <section>
        <!-- <figure>
                <img src="../assets/img/danciben1.png" alt="">
            </figure>
            <figure>
                <img src="../assets/img/danciben2.png" alt="">
            </figure>
            <figure>
                <img src="../assets/img/danciben3.png" alt="">
            </figure> -->

        <Dcxinxis class="dcxinxis" />

        <figure>
          <div>
            <p>+</p>
            <p>添加单词本</p>
            <p>海量精选词书</p>
          </div>
        </figure>
      </section>
    </main>
  </div>
</template>

<script>
import Dcxinxis from "../components/Dcxinxis";

export default {
  name: "DanCiBen",
  components: { Dcxinxis },
  //   name: "Home",
  //   components: {},
};
</script>

<style scoped>
@import url(../assets/iconfont.css);
html,
body {
  background-color: #e1e9ff;
  height: 100%;
}
.box {
  width: 375px;
  height: 100%;
  margin: 0.1rem auto 0;
}

header {
  /* width: 100%; */
  /* height: 0.6rem;    */
  padding: 0 0.16rem;
  /* display: flex; */
  justify-content: space-between;
  align-items: center;
}

header .yuedu {
  height: 0.37rem;
  margin: 0.2rem auto 0.1rem;
  padding-left: 0.84rem;
  font-size: 0.19rem;
  text-align: center;
  line-height: 0.37rem;
}

header .yuedu .shezhi {
  width: 0.49rem;
  height: 0.28rem;
  font-size: 0.11rem;
  border: 1px solid #949292;
  border-radius: 0.08rem;
  float: right;
  margin-top: 0.02rem;
  margin-left: 0.1rem;
  line-height: 0.28rem;
}

header .yuedu .tubiao {
  width: 0.8rem;
  height: 0.32rem;
  /* border: 1px solid #949292; */
  border-radius: 0.15rem;
  float: right;
  border: 1px solid #949292;
  display: flex;
  justify-content: space-around;
  margin-left: 0.2rem;
}
header .yuedu .icon-shenglvehao {
  font-size: 25px;
}
header .yuedu .icon-cross {
  font-size: 25px;
}
header .daka {
  width: 3.4rem;
  margin-bottom: 0.1rem;
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 0.3rem;
}
header .daka .dakaleft {
  font-size: 0.17rem;
}
header .daka .dakaright {
  font-size: 0.1rem;
  width: 1.8rem;
  height: 0.3rem;
  border-radius: 0.1rem;
  color: #949292;
  background-color: #e1e2f6;
}
header .cihui {
  margin: 15px auto;
  border-radius: 9px;
  margin: 0.15rem auto;
  padding: 0.2rem;
  /* background-color: white; */
  border: 1px solid #595c63;
}

header .cihui .shang {
  display: flex;
  justify-content: space-between;
  /* margin-top: 0.21rem; */
  margin-bottom: 0.2rem;
}
header .cihui .shang span {
  font-weight: bold;
  font-size: 0.17rem;
}
header .cihui .shang p {
  font-size: 0.1rem;
  border: 1px solid #949292;
  border-radius: 0.09rem;
  color: #949292;
  padding: 3px;
}
header .cihui .zhong {
  font-size: 0.1rem;
}
header .cihui .xia {
  display: flex;
  justify-content: space-between;
  margin-top: 0.2rem;
  /* margin-bottom: 0.21rem; */
}
header .cihui .xia p {
  width: 1.4rem;
  height: 0.46rem;
  border-radius: 0.2rem;
  color: white;
  line-height: 0.46rem;
  display: flex;
  justify-content: space-around;
  /* padding-left: 0.1rem;
    padding-right: 0.1rem; */
}
header .cihui .xia p span:first-child {
  font-size: 0.14rem;
}
header .cihui .xia p span:last-child {
  font-size: 0.1rem;
  color: rgb(224, 220, 220);
}
header .cihui .xia .xialeft {
  background-color: red;
}
header .cihui .xia .xiaright {
  background-color: #3664ff;
}
/* -------------单词本------------ */
.mulu {
  /* height: 1.3rem; */
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  border-radius: 9px;
  /* background-color: white; */
}

.mulu ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.16rem;
  /* width: 3rem; */
  margin: 0.12rem 0;
  color: #949292;
  padding-left: 0.05rem;
}
.mulu ul li {
  margin-right: 0.23rem;
}
.mulu ul li p {
  width: 0.2rem;
  height: 0.03rem;
  background-color: red;
  margin-left: 0.05rem;
}
.mulu ul li:hover {
  font-weight: bold;
  color: #000;
  font-size: 0.21rem;
}

.mulu span {
  font-size: 0.1rem;
  line-height: 0.41rem;
  margin-right: 0;
  color: #949292;
}
/* ------------------------------- */
/* main{
    flex: 1;
    overflow: auto;
} */
section {
  width: 3.45rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0.1rem auto;
}
figure {
  margin-bottom: 0.2rem;
}
figure div {
  width: 1rem;
  height: 1.03rem;
  background-color: rgb(191, 203, 224);
  border-radius: 0.05rem;
  padding-top: 0.4rem;
  text-align: center;
  color: rgb(64, 123, 231);
}
figure div p {
  font-size: 0.13rem;
}
figure div p:last-child {
  font-size: 0.1rem;
}
figure img {
  width: 1rem;
  height: 1.43rem;
  flex-shrink: 0;
}

/* 底部 */
footer {
  height: 0.6rem;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.24rem;
}
footer div {
  font-size: 0.12rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

router-link span {
  font-size: 0.3rem;
  color: #000;
}
.icon-fanhui:before {
  content: "\e672";
  font-size: 0.3rem;
  color: #000;
  margin-left: -2.5rem;
}
</style>
